<template>
  <div :id="props.domId">
    <loadingTwo v-if="loading" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import loadingTwo from '../css/example/loadingTwo.vue'

const props = defineProps({
  xmUrl: {
    type: String
  },
  domId: {
    type: String,
    default: 'xmind-container'
  }
})
const loading = ref(true)

onMounted(async () => {
  const { XMindEmbedViewer } = await import('xmind-embed-viewer')
  const viewer = new XMindEmbedViewer({
    el: `#${props.domId}`, // HTMLElement | HTMLIFrameElement | string
    // 如果在中国大陆境内速度慢，可以添加的参数 `region: 'cn'` 改为使用 xmind.cn 的图库作为依赖。
    region: 'cn' //optinal, global(default) or cn
  })

  const readyCallback = () => {
    loading.value = false
    viewer.setFitMap()
    viewer.removeEventListener('map-ready', readyCallback)
  }

  fetch(props.xmUrl)
      .then(res => res.arrayBuffer())
      .then(file => viewer.load(file))
      .catch(err => {
        console.error('加载xmind文件出错', err)
        readyCallback()
      })

  viewer.setStyles({
    'width': '100%',
    // CSS styles are available here
  })

  viewer.addEventListener('map-ready', readyCallback)
})
</script>

<style scoped>
:deep(.box) {
  width: 100%;
}
</style>